<template>
	<view>
		<uni-list :border=false>
			<uni-list-item title="班级" class="title"></uni-list-item>
			<picker @change="classPickerChange" @columnchange="columnchange" :value="index"  :range="array" mode="multiSelector">

				<uni-list-item v-if="index.length==0">
					<input slot="body" type="text" disabled placeholder="请选择班级" />
				</uni-list-item>
				<uni-list-item v-else :title="Class"></uni-list-item>
			</picker>
			<uni-list-item title="姓名" class="title"></uni-list-item>
			<uni-list-item>
				<input slot="body" type="text" style="width: 100%;" placeholder="请输入姓名" v-model="name" />
			</uni-list-item>
			<uni-list-item title="学号" class="title"></uni-list-item>
			<uni-list-item>
				<input slot="body" type="number" style="width: 100%;" placeholder="请输入学号" v-model="studentId"
					maxlength="12" />
			</uni-list-item>
			<uni-list-item title="截图" class="title"></uni-list-item>
			<uni-file-picker ref="imgs" file-mediatype="image" :auto-upload="false" file-extname="png,jpg" :limit="1"
				:image-styles="imageStyles" @select="select" @progress="progress" @success="success" @fail="fail"
				@delete="deleteimg" v-model="val_img" />

			<uni-list-item title="!!!图片识别可能需要5s-10s,请耐心等待"></uni-list-item>
		</uni-list>
		<button class="btn_submit" @click="submit">提交</button>
	</view>
</template>

<script>
	import {
		APIUpload,
		APISubmit
	} from '@/api/mudules/cce.js';
	export default {
		data() {
			return {
				arry_key: ["本科21级", "本科20级", "本科19级", "本科18级", "硕士", "博士"],
				array: [
					["本科21级", "本科20级", "本科19级", "本科18级", "硕士", "博士"],
					['自动化2101','自动化2102','自动化2103','自动化2104','自动化2105','自动化2106','自动化2107','自动化2108','计算2101','计算2102','计算2103','计算2104','计算2105','计算2106','计算2107','计算2108']
				],
				index: [],
				name: "",
				studentId: "",
				ImageUrl: "",
				FileName: "",
				val_img: "",
				Grade:"",
				Class:"",
			}
		},
		onLoad() {

		},
		methods: {
			classPickerChange(e) {
				this.index = e.detail.value
				this.Grade=this.arry_key[this.index[0]]
				this.Class=this.array[1][this.index[1]]
			},
			columnchange(e){
				if(e.detail.value==0 && e.detail.column==0){
					this.array.splice(1,1,0)  //小程序bug 必须带上
					this.array[1]=['自动化2101','自动化2102','自动化2103','自动化2104','自动化2105','自动化2106','自动化2107','自动化2108','计算2101','计算2102','计算2103','计算2104','计算2105','计算2106','计算2107','计算2108']
				}
				else if(e.detail.value==1 && e.detail.column==0){
					this.array.splice(1,1,0)
					this.array[1]=['测控2001','测控2002','测控2003','测控2004','自动2001','自动2002','自动2003','自动2004','自动2005','计算2001','计算2002','软件2001','软件2002','信安2001','信安2002','物联2001','智科2001','智科（创新）2001']
				}
				else if(e.detail.value==2 && e.detail.column==0){
					this.array.splice(1,1,0)
					this.array[1]=['测控1901', '测控1902', '测控1903', '测控1904', '计算1901', '计算1902', '软件1901', '软件1902', '物联1901','信安1901','信安1902', '智能1901', '智能实验1901', '自动1901', '自动1902', '自动1903', '自动1904', '自动1905']
				}
				else if(e.detail.value==3 && e.detail.column==0){
					this.array.splice(1,1,0)
					this.array[1]=['测控1801', '测控1802', '测控1803', '测控1804', '计算1801', '计算1802', '软件1801', '软件1802', '物联1801','信安1801','信安1802', '自动1801', '自动1802', '自动1803', '自动1804', '自动1805']
				}
				else if(e.detail.value==4 && e.detail.column==0){
					this.array.splice(1,1,0)
					this.array[1]=['研控计1920','研控计1921','研控计1922','研控计1923','研控计1924','研控计1925','研控计1926','研控计1927','研控计2025','研控计2026','研控计2027','研控计2028','研控计2029','研控计2030','研控计2031','研控计2032','研控计2126','研控计2127','研控计2128','研控计2129','研控计2130','研控计2131','研控计2132','研控计2133']
				}
				else if(e.detail.value==5 && e.detail.column==0){
					this.array.splice(1,1,0)
					this.array[1]=['博控计1949','博控计2059','博控计2163','博控计1846','博控计1646','博控计1544']
				}
			},
			deleteimg() {
				this.ImageUrl = ""
				this.FileName = ""
				this.val_img = ""
			},
			select(e) {
				uni.showLoading({
					title: "上传中",
					mask: true
				})
				let self = this;
				uni.uploadFile({
					url: "https://api.cce.risingsunpig.cn/api_1_0/weixinapp/pic_upload", //开发者服务器 url
					name: 'Image',
					filePath: e.tempFilePaths[0], //要上传文件资源的路径
					timeout: 10000,
					header: {
						'content-type': 'multipart/form-data',
					},
					success: function(res) {
						self.ImageUrl = JSON.parse(res.data).data.ImageUrl
						self.FileName = JSON.parse(res.data).data.FileName
						uni.hideLoading()
						if (res.statusCode != 200) {
							uni.showToast({
								title: res.errMsg,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: function(res) {
						self.deleteimg()
						uni.showToast({
							title: res.errMsg,
							icon: 'none',
							duration: 5000
						});
						uni.hideLoading()
					},
				})
			},
			submit() {
				if(this.StudentID=='' || this.Class=='' || this.Name=='' || this.ImageUrl==''){
					uni.showToast({
						title: "请完善信息填写",
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.showLoading({
					title: "请耐心等待",
					mask: true
				})
				const params = {
					StudentID: this.studentId,
					Class: this.Class,
					Name: this.name,
					Grade:this.Grade,
					ImageUrl: this.ImageUrl,
					FileName: this.FileName
				}
				APISubmit(params).then(res => {
					uni.hideLoading()
					if (res.code == "2000") {
						uni.redirectTo({
							url: "/pages/finish/finish"
						})
					} else if(res.code == "4000"){
						uni.showToast({
							title: "请完善信息填写",
							icon: 'none',
							duration: 2000
						})
					}else(
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					)
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none',
						duration: 2000
					});
				})
			}
		}
	}
</script>

<style>
	.title .uni-list-item {
		background-color: #f4f4f4 !important;
	}

	input {
		font-size: 14px;
		color: #3b4144;
		overflow: hidden;
	}

	.btn_submit {
		margin: 10rpx 10rpx;
		background-color: #1a73e8;
		border-radius: 30px;
		color: #FFFFFF;
	}

	.uni-file-picker__container {
		margin: 0 !important;
	}
</style>
